<template>
  <div id="app-container" style="padding:30px;">
    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书单名称:">
        <el-input v-model="bookListQuery.name" placeholder="书单名称"/>
      </el-form-item>
      <el-form-item label="批次:">
        <el-select v-model="bookListQuery.batchId" placeholder="请选择">
          <el-option label="收费" value="1"></el-option>
          <el-option label="免费" value="0"></el-option>
        </el-select>
      </el-form-item>
      <br>
      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-button type="primary" @click="query()">查询</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="reset()">清空</el-button>
          </el-col>
          <el-col :span="6">
            <router-link :to="'/bms/copyright/bookList/create'">
              <el-button type="primary">添加书单</el-button>
            </router-link>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="excelDialogVisible=true">导入<i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>


    <!-- 列表 -->
    <el-table :data="bookLists">
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="书单名称"/>
      <el-table-column prop="batchId" label="批次"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteBookList(scope.row.id)">删除</el-button>
          <router-link :to="'/bms/copyright/bookList/update/'+scope.row.id">
            <el-button type="primary" size="mini">修改</el-button>
          </router-link>
          <router-link :to="''+scope.row.id">
            <el-button type="primary" size="mini">接口库书籍</el-button>
          </router-link>


        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="pageSize"
      :current-page="pageNo"
      :total="total"
      :pager-count="11"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="query">
    </el-pagination>
    <!--对话框-->
    <el-dialog
      title="导入Excel"
      :visible.sync="excelDialogVisible"
      width="30%">
      <el-upload
        class="upload-demo"
        ref="upload"
        name="file"
        :action="this.BASE_API + '/copyrightin/bookList/importEasyExcel'"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError"
        :disabled="importBtnDisabled"
        :limit="1"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="importExcel">上传到服务器</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  import bookList from "@/api/copyrightin/bookList/bookList";

  export default {
    data() { // 自定义变量，初始化变量
      return {
        bookLists: null, // ## 数据列表
        bookListQuery: {}, // ##查询条件封装对象
        total: 0, // ## 总记录数
        pageNo: 1, // ## 页码
        pageSize: 2, // ## 每页显示记录数
        currentTime: '', // ## 当前时间
        BASE_API: process.env.VUE_APP_BASE_API, // ## 接口API地址
        excelDialogVisible: false, // ## 导入Excel窗口, false为关闭
        importBtnDisabled: false // ## 按钮是否禁用,false为不禁用
      }
    },
    created() { // ## 在页面渲染之前,一般先调用methods定义的方法
      this.query()
    },
    methods: { // 自定义函数
      query(pageNo = 1) { // 查询
        this.pageNo = pageNo
        // 调用后端接口查询数据
        bookList.query(this.pageNo, this.pageSize, this.bookListQuery)
          .then(response => {
            // 赋值
            this.bookLists = response.data.items
            this.total = response.data.total
            this.currentTime = this.format(new Date(), 'yyyy-MM-dd HH:mm:ss')
          })
      },
      reset() { // 清空查询条件内容
        // 清空数据
        this.bookListQuery = {}
        // 重新查询
        this.query()
      },
      deleteBookList(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bookList.deleteBookList(id)
            .then(response => {
              //消息提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.query() //重新查询
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      importExcel() { // ## 导入Excel
        // ## 禁用按钮
        this.importBtnDisabled = true
        this.$refs.upload.submit()
      },
      fileUploadSuccess() { // ## 导入成功后执行方法
        // ## 导入成功后关闭窗口
        this.excelDialogVisible = false
        // ## 提示信息
        this.$message({
          type: 'success',
          message: '导入成功'
        })
        // ## 重新查询获取新数据
        this.query()
      },
      fileUploadError() { // ## 导入失败后执行方法
        // ## 提示信息
        this.$message({
          type: 'error',
          message: '导入失败'
        })
      }
    }
  }
</script>
